<div class="bs-docs-section">
  <h1 id="scrollable-shadow" class="page-header">Scrollable shadow</h1>

  <h3>Usage</h3>
  <p>Attach the <code>scrollable-shadow</code> class to any container which has its overflow-y property set.</p>

  <div class="bs-callout bs-callout-danger">
    <h4>Cross-browser compatibility</h4>
    <p>Scrollable shadow works well with our <a href="../getting-started/#support-browsers">supported browsers</a>. However, Internet Explorer 9+ is required to see the effect.</p>
  </div>

  <div class="bs-example" data-example-id="default-scrollable-shadow">
    <div class="scrollable scrollable-shadow">
      <h4>Overflowing text to show optional scrollbar</h4>
      <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    </div>
  </div>
{% highlight html %}
<div class="scrollable-shadow">
  <h4>Overflowing text to show optional scrollbar</h4>
  ...
</div>
{% endhighlight %}
</div>
